<template>
  <div class="wrap">
    <div class="company_top">
      <div class="company_top_left">公司</div>
      <div class="company_top_right">
        <input type="text" placeholder="搜索..." />
        <img src="/src/static/imgs/chakan.png" alt="" />
      </div>
    </div>
    <div class="company_bottom">
      <div
        class="cb_box"
        v-for="item in companlist"
        :key="item.id"
        @click="goToDetail(item._id)"
      >
        <div class="cb_box_left">
          <img :src="item.logoUrl" alt="" />
        </div>
        <div class="cb_box_right">
          <div class="cb_box_right_top">
            <div class="context_top">{{ item.title }}</div>
            <div class="context_middle">
              <span>{{ item.companyType }}</span
              >|<span>{{ item.companyRange }}</span
              >|{{ item.companyNumber }}人
            </div>
            <div class="context_bottom">
              <div
                class="item"
                v-for="(ele, index) in item.welfare"
                :key="index"
              >
                {{ ele.title }}
              </div>
            </div>
          </div>
          <div class="cb_box_right_bottom">
            <div class="hot_left">
              热招: {{ item.workInfo[0].title }} 等<span>{{
                item.workInfo.length
              }}</span
              >个岗位
            </div>
            <div class="hot_right">
              <van-icon name="arrow" size="0.26rem" color="#B4B4B5" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { reactive } from "vue";
import { getCompanyList } from "../../api/company";
const router = useRouter();

let companlist = reactive([]);
const goToDetail = (id) => {
  router.push({
    path: "/xiangqing",
    query: {
      id,
    },
  });
};

const getList = async () => {
  let res = await getCompanyList();
  console.log(res.data.list);
  companlist.push(...res.data.list);
};
getList();
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.company_top {
  width: 100%;
  height: 1.5625rem;
  background: #59ad4c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3125rem;
  box-sizing: border-box;
  position: fixed;

  .company_top_left {
    font-size: 0.4688rem;
    color: #fff;
  }

  .company_top_right {
    width: 5.6875rem;
    height: 0.625rem;
    align-items: center;
    display: flex;
    background-color: #fff;
    border-radius: 0.3125rem;

    input {
      width: 4.454rem;
      height: 0.625rem;
      // border-radius: 20px;
      border: none;
      outline: none;
      margin-left: 0.4531rem;
      box-sizing: border-box;
      font-size: 0.25rem;
    }

    img {
      width: 0.4688rem;
      height: 0.4688rem;
    }
  }
}
.body {
  margin-top: 6.25rem;
}
.company_bottom {
  width: 100%;
  margin-top: 2.25rem;
  //   height: 10%;
  // border: 1px solid #000;

  .cb_box {
    width: 90%;
    height: 3rem;
    margin: 0 auto;
    margin-top: 0.3125rem;
    background: #ffffff;
    box-shadow: 0px 0.0938rem 0.3281rem 0rem rgba(20, 150, 57, 0.22);
    border-radius: 0.3125rem;
    display: flex;

    .cb_box_left {
      width: 0.8rem;
      height: 0.8rem;
      margin: 0.365rem 0.1rem 0 0.3rem;
      border: 1px solid #000;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }

    .cb_box_right {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 1px solid #000;
      box-sizing: border-box;

      .cb_box_right_top {
        width: 95%;
        height: 1.6438rem;
        margin: 0.365rem 0 0 0;
        border-bottom: 1px solid #f4f4f4;
        padding-bottom: 0.2563rem;

        .context_top {
          font-weight: 400;
          font-size: 0.36rem;
          color: #333333;
          margin-bottom: 0.2rem;
        }

        .context_middle {
          font-weight: 400;
          font-size: 0.22rem;
          color: #333333;
          margin-bottom: 0.1rem;
        }

        .context_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 59%;
          height: 0.5rem;
          // border: 1px solid #000;
          // box-sizing: border-box;

          .item {
            font-weight: 300;
            font-size: 0.2rem;
            color: #333333;
            width: 1rem;
            height: 0.3125rem;
            line-height: 0.3255rem;
            text-align: center;
            // border: 1px solid #000;
            box-sizing: border-box;
            background-color: #f4f4f4;
            border-radius: 0.085rem;
          }
        }
      }

      .cb_box_right_bottom {
        width: 95%;
        height: 1.25rem;
        display: flex;
        // border: 1px solid #000;
        justify-content: space-between;
        align-items: center;
        .hot_left {
          font-weight: 400;
          font-size: 0.235rem;
          color: #333333;
        }
      }
    }
  }
}
</style>
